<template>
<!-- 搜索栏开始-->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <!-- model 绑定表单数据 -->
      <el-form :inline="true" :model="queryDict" class="demo-form-inline">
        <el-form-item label="检测项编码">
          <el-input v-model="queryDict.checkItemId" placeholder="检测项编码"/>
        </el-form-item>
        <el-form-item label="检测项名称">
          <el-input v-model="queryDict.checkItemName" placeholder="检测项名称"/>
        </el-form-item>
        <el-form-item label="检测项类型">
          <el-select
              style="width: 100px"
              v-model="queryDict.checkItemType"
              placeholder="选择类型"
          >
            <el-option value="" :selected="true" label="全部"/>
            <el-option v-for="item in types" :key="item.checkItemType" :value="item.checkItemType" :label="item.checkItemType"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="loadDict">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 搜索栏结束-->

  <!-- 工具栏部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <el-tooltip
          class="box-item"
          effect="dark"
          content="新增缺陷项"
          placement="top-start"
      >
        <el-button @click="toAddDict" type="primary">
          <el-icon>
            <Plus/>
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary">
        <el-icon>
          <EditPen/>
        </el-icon>
      </el-button>
      <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                     @confirm="deleteBtnHandler" title="您确定要删除选中的典信息吗？">
        <template #reference>
          <el-button :disabled="deleteBtnDisabled" type="primary">
            <el-icon>
              <Minus/>
            </el-icon>
          </el-button>
        </template>
      </el-popconfirm>

    </el-col>
  </el-row>
  <!-- 工具栏部分结束 -->

  <!-- 列表部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <el-table ref="dictTaebl" @selection-change="handleSelectionChange" :data="dicts" border :stripe="true"
                style="width: 95%">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="checkItemId" label="检测项编码"/>
        <el-table-column prop="checkItemName" label="检测项名称"/>
        <el-table-column prop="checkItemType" label="检测项类型"/>
        <el-table-column prop="checkItemTools" label="检测项工具"/>
        <!-- 行工具栏 -->
        <el-table-column width="140" label="操作">
          <template #default="scope">
            <el-button type="primary" @click="toEditDict(scope.row.checkItemId)" size="small">编辑</el-button>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                           @confirm="deleteDict(scope.row.checkItemId)" title="您确定要删除这个字典信息吗？">
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 列表部分结束 -->

  <!-- 分页部分开始 -->
  <el-row style="margin-top: 10px;">
    <el-col :span="24">
      <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit"
                     :total="total"/>
    </el-col>
  </el-row>
  <!-- 分页部分结束 -->

<FlawdictAddWin :visible="addFlawDictVisble" @optionCompleted="addOptionCompleted"/>
  <FlawdictEditWin :visible="editFlawDictVisble" :checkItemId ="editId"  @optionCompleted="editOptionCompleted"/>
</template>

<script>
import FlawItemRequest from "@/api/flawItem.js";
import FlawdictAddWin from "@/views/qc/checkItem/flawdict-add-win.vue";
import FlawdictEditWin  from "@/views/qc/checkItem/flawdict-edit-win.vue";
import dictRequest from "@/api/dict.js";

export default {
  name: "qcsetting.vue",
  components:{
    FlawdictAddWin,
    FlawdictEditWin,
  },
  data(){
    return {
      queryDict: {},
      limit: 10,
      page:1,
      types:{},
      total: 0,
      dicts:[],
      addFlawDictVisble:false,
      editFlawDictVisble:false,
      editId:-1,

      editBtnDisabled:false,
      deleteBtnDisabled:false,



   }
  },methods:{
    /**
     * 工具栏删除按钮事件
     */
    deleteBtnHandler() {
      let selectionRows = this.$refs.dictTaebl.getSelectionRows();
      let checkItemIds = new Array();
      selectionRows.forEach(row => {
        checkItemIds.push(row.checkItemId);
      })
      FlawItemRequest.deleteCheckItems(checkItemIds, res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.loadDict();
      });
    },
    /**
     * 工具栏编辑按钮事件
     */
    editBtnHandler() {
      let editFlawDict = this.$refs.dictTaebl.getSelectionRows()[0];
      if (editFlawDict != undefined) {
        this.editId = editFlawDict.checkItemId;
        this.editFlawDictVisble = true;
      } else {
        this.$message({
          type: 'warning',
          message: '请选择要编辑的信息!'
        });
      }
    },

    pageChange(currentPage, pageSize) {
      // 将最新的页码赋值给this.currentPage
      this.page = currentPage;
      // 重新加载数据
      this.loadDict();
    },
    deleteDict(checkItemId){
      FlawItemRequest.deleteCheckItem(checkItemId,res=>{
        if (res.code == '200'){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.loadDict();
        }else{
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      });
    },

    /**
     * 行编辑事件
     */
    toEditDict(checkItemId){
      this.editFlawDictVisble = true;
      this.editId = checkItemId;
    },

    /**
     * 监听子组件行编辑时间
     */
    editOptionCompleted(){
      this.editFlawDictVisble = false;
      this.loadDict();
    },
    /**
     * 监听子组件
     */
    addOptionCompleted(){
      this.addFlawDictVisble = false;
      this.loadDict();
    },
    /**
     *数据选择事件
     */
    handleSelectionChange(){
      let selectionRows = this.$refs.dictTaebl.getSelectionRows();
      if (selectionRows.length == 0) {
        this.editBtnDisabled = true;
        this.deleteBtnDisabled = true;
      } else if (selectionRows.length == 1) {
        this.editBtnDisabled = false;
        this.deleteBtnDisabled = false;
      } else {
        this.editBtnDisabled = true;
        this.deleteBtnDisabled = false;
      }
    },

    /**
     * 按钮事件添加
     */
    toAddDict(){
      this.addFlawDictVisble = true;
    },

    /**
     * 加载字典信息
     */
    loadDict(){
      // 设置其他的条件
      this.queryDict.page = this.page;
      this.queryDict.limit = this.limit;
      FlawItemRequest.loadFlawItem(this.queryDict, res => {
        this.dicts = res.data.data;
        this.total = res.data.total;
      })
    },
    /**
     * 加载所有信息
     */
    loadDictAll(){
      FlawItemRequest.loadFlawItemAll(res => {
        const types = res.data.map(item => {
          return {
            checkItemType: item.checkItemType,
          }
        })
        let seen = {};
        let filteredArr = types.filter(item => {
          let key = item.checkItemType ;
          if (!seen[key]) {
            seen[key] = true;
            return true;
          }
          return false;
        });
        this.types = filteredArr;
      })
    },
  },mounted() {
    this.loadDict();
    this.loadDictAll();
  }
}
</script>

<style scoped>

</style>